<template>
  <div>
    <el-header style="text-align: right; font-size: 12px">
      <span>vuex</span>
    </el-header>
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-container>
        <el-main style="margin-bottom:50px;">
          <p>state1:{{count}}</p>
          <p>state2:{{count}}</p>
          <p>mutation:{{mutationData}}</p>
          <button @click="increment">点击我</button>
          <div>
            <h4 class="bg-color">
              我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性,
              getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
            </h4>
            <p>Getters:{{saleProducts}}</p>
          </div>

          <div>
            <h4 class="bg-color">
              我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type,
              第一个参数是state, 第二参数是payload, 也就是自定义的参数.
            </h4>
            <h4 class="bg-color">
              actions 类似于 mutations，不同在于：
              actions提交的是mutations而不是直接变更状态
              actions中可以包含异步操作, mutations中绝对不允许出现异步
              actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
              链接：<a href="https://www.jianshu.com/p/83d5677b0928">https://www.jianshu.com/p/83d5677b0928</a>
            </h4>
            <ul>
              <li v-for="(product,index) in products" :key="index">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
              </li>
              <button @click="minusPriceFun">减少价格</button> //添加按钮
            </ul>
          
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      tableData: Array(20).fill(item)
    };
  },
  created() {
  },
  methods: {
    ...mapActions(["minusPriceAsync"]),
    ...mapMutations(['mutationTest']),
    increment() {                                                                                                                                                                                                                                                                
      this.$store.commit("increment");
      console.log(this.$store.state.count);
      this.mutationTest("我改变了")
    },
    minusPriceFun() {
      //  console.log("this.minusPriceAsync====xxxx",this.minusPriceAsync)
      this.minusPriceAsync(10);

      //  this.$store.dispatch('minusPriceAsync', 5)
    }
  },
  // computed: mapState(['routes']),

  computed: {
    ...mapState({
      // 箭头函数可使代码更简练
      count: state => state.count,
      // 传字符串参数 'count' 等同于 `state => state.count`
      countAlias: "count",
      products: "products"
    }),
    //方法二
    ...mapState(['mutationData']),
    ...mapGetters(["saleProducts"])
  }
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
body {
  overflow: hidden;
}
</style>